<template>
      <!-- 添加对话框 -->
      <a-modal
        :title="title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="closeAddMenu"
        :cancelText="cancelText"
        :centered="centered"
        :mask="mask"
        :maskClosable="maskClosable"
        :okText="okText"
        width="560px"

      >
        <a-form-model
          ref="updateMenuForm"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          labelAlign="left"
          :colon="colon"
          :rules="formRules"
        >
          <a-row type="flex"  justify="center">
            <a-col :span="24">
              <a-form-model-item label="上级菜单" prop="parentMenuName">
                <a-tree-select
                  v-model= "formDataParentMenuName"
                  tree-data-simple-mode
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="treeData"
                  placeholder="请选择上级菜单"
                  :load-data="onLoadData"
                  @select="selectTreeNode"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="菜单类型" prop="dictType">
                <a-radio-group v-model="form.menuType">
                  <a-radio value="M">
                    目录
                  </a-radio>
                  <a-radio value="C">
                    菜单
                  </a-radio>
                  <a-radio value="F">
                    按钮
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item v-if="form.menuType !='F' " label="菜单图标" prop="icon">

                <a-popover
                  title="菜单图标"
                  trigger="focus"
                  placement="bottom"
                  >
                  <template slot="content">
                    <iocn-selector  @selected="selectIcon" ></iocn-selector>
                  </template>

                  <a-input v-model="form.icon" placeholder="请选择菜单图标">
                    <svg-icon
                      v-if="form.icon"
                      slot="prefix"
                      :icon-class="form.icon"
                      style="height: 32px;width: 16px;"
                    />
                    <a-icon v-else slot="prefix" type="search" />
                  </a-input>

                </a-popover>

              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="菜单名称" :label-col="labelColItem" prop="menuName" :wrapper-col="wrapperColItem">
                <a-input v-model="form.menuName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="显示排序" :label-col="labelColItem" prop="orderNum" :wrapper-col="wrapperColItem">
                <!--<a-input v-model="form.orderNum" />-->
                <a-input-number v-model="form.orderNum" :min="1" :max="10"  />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="是否外链" v-if="form.menuType !='F' " :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-radio-group v-model="formDataFrame">
                  <a-radio value="1">
                    是
                  </a-radio>
                  <a-radio value="2">
                    否
                  </a-radio>

                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="路由地址" v-if="form.menuType !='F' " prop="path" :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-input v-model="form.path" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12" v-if="form.menuType =='C' ">
              <a-form-model-item label="组件路径"  :label-col="labelColItem" prop="component" :wrapper-col="wrapperColItem">
                <a-input v-model="form.component" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="form.menuType !='M'">
              <a-form-model-item label="权限标识"   :label-col="labelColItem" prop="perms" :wrapper-col="wrapperColItem">
                <a-input v-model="form.perms" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="显示状态" v-if="form.menuType !='F'" prop="visible" :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-radio-group v-model="formDataVisible">
                  <a-radio value="1">
                    显示
                  </a-radio>
                  <a-radio value="2">
                    隐藏
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="菜单状态" v-if="form.menuType !='F'" prop="status" :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-radio-group v-model="formDataStatus">
                  <a-radio value="1">
                    正常
                  </a-radio>
                  <a-radio value="2">
                    停用
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </a-modal>
</template>

<script>
  import {queryMenuTreeByParentId,updateMenu,detail} from "@/static/api/base/menu";
  import IocnSelector from "@/components/IocnSelector/IocnSelector";

    export default {
      name: "updateMenu",
      components:{IocnSelector},
      computed:{
        //处理后台传递的visible转换为字符串
        formDataVisible:{
          get:function (){
            debugger
            if (typeof this.form.visible === "number"){
              return String(this.form.visible)
            }
            return this.form.visible;
          },
          set:function (visible){
            if (visible instanceof String){
              this.form.visible = parseInt(visible);
            }else{
              this.form.visible = visible;
            }
          }
        },
        formDataParentMenuName:{
          get:function () {
            // if (this.form.parentMenu){
            //   debugger
            //   this.form.parentMenuName = this.form.parentMenu.menuName;
            // }else{
            //   this.form.parentMenuName = "";
            // }
            return this.form.parentMenuName;
          },
          set:function (menuName){
            debugger
            return this.form.parentMenuName = menuName;
          }
        },
        formDataFrame:{
          get:function (){
            debugger
            if (typeof this.form.frame === "number"){
              return String(this.form.frame)
            }
            return this.form.frame;
          },
          set:function (frame){
            if (frame instanceof String){
              this.form.frame = parseInt(frame);
            }else{
              this.form.frame = frame;
            }
          }
        },
        formDataStatus:{
          get:function (){
            debugger
            if (typeof this.form.status === "number"){
              return String(this.form.status)
            }
            return this.form.status;
          },
          set:function (status){
            if (status instanceof String){
              this.form.status = parseInt(status);
            }else{
              this.form.status = status;
            }
          }
        }
      },
      data(){
        return {
          visible: false,
          confirmLoading: false,
          title: "修改",
          cancelText: "取消",
          okText:"确定",
          centered:true,
          mask:true,
          maskClosable:false,
          wrapperCol:{ span: 19 },
          labelCol:{ span: 4 },
          wrapperColItem:{ span: 14,offset: 2 },
          labelColItem:{ span: 6 },
          colon: false,
          // layout:"Horizontal",
          form:{

          },
          formRules:{
            parentMenuRule :[{ required: true, message: '请选择上级菜单', trigger: 'change'}],
            menuType:[{required:true}],
            menuName:[{required:true, message: '请填写菜单名称', trigger: 'blur'}, ],
            orderNum:[{required:true, message: '请填排序编号', trigger: 'blur'}],
          },
          treeData:[],
          treeSelectValue:'',
          curMenuId:-1,
        }
      },
      created(){
        // this.initFormData();
        //初始化菜单树
        this.initTreeData(0);
      },
      methods:{
        handleOk(){
          //验证表单并提交
          this.$refs.updateMenuForm.validate(valid =>{
            if (valid){
              debugger
              updateMenu(this.form).then(response => {
                debugger
                if (response.data.data >0) {
                  this.msgSuccess(this.title,"修改成功");
                  this.closeAddMenu();
                  this.$parent.getPage();
                }
              })
            }else{
              this.msgError(this.title,"修改失败");
              return false;
            }
          })
        },
        showUpdateMenu(menuId){
          debugger;
          //重置表单
          // this.reset();
          this.visible = true;
          // console.info("menuId"+menuId);
          detail(menuId).then(res =>{
            debugger
            this.form = res.data.data;
            console.info(this.form)
          })
        },
        closeAddMenu(){
          this.visible = false;
          this.reset();  //重置表单
        },
        onLoadData(treeNode){
          const {id} = treeNode.dataRef;
          const _this = this;
          return new Promise((resolve) => {
            if (treeNode.dataRef.children) { // 有值了直接渲染
              resolve();
              return;
            }
            // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
            queryMenuTreeByParentId(id).then(response => {
              treeNode.dataRef.children = response.data.data;
              _this.treeData = [..._this.treeData]
              // this.treeData.concat(response.data.data);
            });
            resolve();
          })
        },
        initTreeData(parentId){
          queryMenuTreeByParentId(parentId).then(response => {
            this.treeData = response.data.data;
            debugger
          });
        },
        selectTreeNode(value, node, extra){
          this.form.parentId = node.dataRef.id;
          this.formDataParentMenuName = value;
          debugger
        },
        selectIcon(name){
          this.form.icon = name;
          debugger
        },
        // initFormData(){
        //   //重置添加表单
        //   this.form= {
        //     menuType:'M',
        //     parentMenu:undefined,
        //     parentId:undefined,
        //     icon:undefined,
        //     menuName:undefined,
        //     orderNum: undefined,
        //     frame:'1',
        //     path:undefined,
        //     visible:'0',
        //     status:'0',
        //     component:'',
        //     perms:'',
        //   };
        // },
        reset(){
           // this.initFormData();
          debugger
          this.$refs.updateMenuForm.resetFields();
        }

      }
    }
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 8px;
  }
  .ant-form-item-no-colon label {
    font-weight: 800;
  }

</style>
